import { View, Text,StyleSheet,ScrollView, FlatList,Image,useWindowDimensions} from 'react-native'
import React,{ useEffect,useState,useRef} from 'react'
import api from '../config'
import AutoHeightWebView from 'react-native-autoheight-webview'
export default function ProduceDetails({navigation,route}) {
   
  // 商品型号信息
  let [family,setFamily]=useState([])
  // 商品信息 
  let [product,setProduct]=useState([])
  // 获取当前屏幕尺寸
  let windowWidth=useWindowDimensions().width
  // 子组件的引用
  let swiper=useRef()
  // console.log(windowWidth);
  // 组件挂载 接收上一个页面传来的数据
  useEffect(()=>{
    // 读取路由参数
    console.log(route);
    let pid=route.params.pid
    pid=pid?pid:1
    let url=api.productDetails + '?lid='+pid
    // console.log(url);
    fetch(url).then(res=>{
      return res.json()
    }).then(data=>{
      // console.log(data);
      setFamily(data.family)
      setProduct(data.product)
      navigation.setOptions({
        title:data.product.lname
      })
    }).catch(err=>{
      console.log(err);
    })
  },[])
  useEffect(()=>{
    // console.log('发生改变了-----');
    let timer=null //控制轮播定时器
    if(product.picList){
      let picIndex = 0   //当前要显示的图片的下标
      timer = setInterval(()=>{
          //console.log(picIndex)
          picIndex++
          picIndex = picIndex>=product.picList.length ? 0 : picIndex
          //让轮播组件(平面列表)滚动到指定的位置
          swiper.current.scrollToIndex({
              index: picIndex
          })
      }, 1000)
  }
    return ()=>{
      console.log('---详情被卸载了---');
      if(timer){
        clearInterval(timer) //防止内存泄漏
        timer=null
      }
    }

  },[product.picList])
    function _renderItem({index,item}){
      return <Image style={{width:windowWidth,height:windowWidth}} source={{uri:api.base+item.md}}/>
    }
  return (
    <ScrollView>
      {/* F1 型号信息 */}
      {/* F2 轮播广告 */}
      {/* horizontal 是否水平滚动 */}
      {/* pagingEnabled 平面列表的分页显示 */}
      <FlatList
        data={product.picList}
        renderItem={_renderItem}
        horizontal={true}
        pagingEnabled={true}
        ref={swiper}
        />
      {/* F3 主标题/副标题/价格 */}
      {/* F4 操作按钮组：删除/修改 */}
      {/* F5 详细信息 */}
      <Text>{product.details}</Text>
      {/* <AutoHeightWebView source={{html:product.details}}/> */}
    </ScrollView>
  )
}